<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  #unit:before {
    height: 0;
    border-top: 0;
  }
</style>
<template>
  <div class="oitem">
    <div class="weui-cells__title">货品明细{{itemNo + 1}}
      <p id="acts" style="float: right;color: #1aad19;" v-if="isLast">
        <span id="addItem" @click="addItem" style="padding-right: 5px;">添加</span>
        <span v-if="itemNo != 0">|</span>
        <span id="delItem" style="padding-left: 5px;" @click="delItem" v-if="itemNo != 0">删除</span>
      </p>
    </div>
    <div class="weui-cell weui-cell_select fir">
      <div class="weui-cell__hd"><label class="weui-label">货品类别</label></div>
      <div class="weui-cell__bd">
        <select class="weui-select type" v-model="atype" @change="doEmitter">
          <option v-for="(item, index) in picktypes" :value="item.dictValue" :disabled="packPtype(item.dictValue)">{{item.dictLabel}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell weui-cell_select">
      <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
      <div class="weui-cell__bd">
        <select class="weui-select product" v-model="currentProduct" @change="doEmitter">
          <option value="" disabled>请选择</option>
          <option   v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell weui-cell_select">
      <div class="weui-cell__hd"><label class="weui-label">规格 </label></div>
      <div class="weui-cell__bd">
<!--        <input type="hidden" class="spec"  :name="'items[' + itemNo + '].speid'" :value="spec.guid" />-->
<!--        <input type="hidden"  :name="'items[' + itemNo + '].spename'" :value="spec.name" />-->
<!--        <input type="hidden"  :name="'items[' + itemNo + '].stockunit'" :value="spec.stockunit" />-->
<!--        <input type="hidden"  :name="'items[' + itemNo + '].stockunitid'" :value="spec.stockunitid" />-->
        <!--        <select class="weui-select spec" v-model="spec">-->
        <!--          <option selected=""  v-for="(item, index) in specifications" :key="item.guid" :value="item">{{item.name}}</option>-->
        <!--        </select>-->
        <model-list-select :list="specifications"
                           v-model="specId"
                           option-value="guid"
                           option-text="name"
                           placeholder="请选择">
        </model-list-select>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">{{spec.isUnit == 1 ? '重量' : '数量'}}</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input weight inlinput1" v-model="weight" type="number" placeholder="请输入"  @change="doEmitter" />
        <input class="weui-input inlinput2" type="text" readonly :value="spec.stockunit" />
      </div>
    </div>
    <template v-if="picktype == 2">
      <div class="weui-cells__title">成本对象</div>
      <div class="weui-cell weui-cell_select fir">
        <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
        <div class="weui-cell__bd">
          <select class="weui-select product2" v-model="product2">
            <option value="" disabled>请选择</option>
            <option   v-for="(item, index) in products2" :key="item.productId" :value="item.productId">{{item.productName}}</option>
          </select>
        </div>
      </div>
      <div class="weui-cell weui-cell_select">
        <div class="weui-cell__hd"><label class="weui-label">规格 </label></div>
        <div class="weui-cell__bd">
          <select class="weui-select spec2" v-model="cospguid"  @change="doEmitter">
            <option selected=""  v-for="(item, index) in specifications2" :key="item.guid" :value="item.guid">{{item.name}}</option>
          </select>
        </div>
      </div>
    </template>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" v-model="remark" @change="doEmitter" placeholder="请输备注内容" rows="2"></textarea>
      </div>
    </div>
  </div>
</template>

<script>
  import 'vue-search-select/dist/VueSearchSelect.css'
  import {ModelListSelect} from 'vue-search-select'
  export default {
    data () {
      return {
        value: '',
        defaultResult: [],
        currentProduct: '',
        specifications: [],
        spec: '',
        picktypes: [],
        atype: '',
        products: [],
        product2: '',
        specifications2: [],
        specId: '',
        model: {},
        weight: '',
        remark: '',
        cospguid: ''
      }
    },
    components: {ModelListSelect},
    props: [
      'itemNo',
      'isLast',
      'picktype',
      'products2'
    ],
    computed: {
      filterResult () {
        return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value))
      }
    },
    watch: {
      'picktype': function (val) {
        if (val == 1) {
          this.atype = 1;
        } else if (val == 2) {
          this.atype = 4;
        }
      },
      'currentProduct': function(){
        this.getSpecByPro();
      },
      'atype': function (val) {
        this.currentProduct = '';
        this.getProducts(val);
        // this.getSpecByPro();
        this.specifications = [];
      },
      'product2': function (val) {
        this.getSpecByPro2(val);
      },
      'specId': function (val) {
        if (!val) return;
        this.spec = this.specifications.filter(item => item.guid == val)[0];
        this.$forceUpdate();
        this.doEmitter();
      },
    },
    mounted() {
      this.getPicktypes();
    },
    methods: {
      doEmitter(){
        this.model = {
          picktype: this.atype,
          productid: this.currentProduct,
          // productname: this.currentProduct.productname,
          speid: this.spec.guid,
          spename: this.spec.name,
          stockunit: this.spec.stockunit,
          stockunitid: this.spec.stockunitid,
          weight: this.weight,
          remark: this.remark
        };
        if (this.picktype == 2) {
          this.model.cospguid = this.cospguid;
        }
        this.model.index = this.itemNo;
        this.$emit('changeData', this.model);
      },
      addItem: function () {
        this.$emit('doAddItem');
      },
      delItem: function () {
        this.$emit('doDelItem');
      },
      getProducts: function () {
        let cate = this.atype;
        if (this.cate == 2) {
          cate = '2,5';
        }
        let that = this;
        this.axios({
          method: 'get',
          responseType: 'json',
          url: '/prod-api/getProducts',
          params: {productflag: cate}
        }).then(response => {
          if (response.data.code == 200) {
            this.products = response.data.data;
            console.log('products:', this.products)
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastText('获取货品数据失败')
          }
        });
      },
      getSpecs: function() {
        if (this.currentProduct == '') {
          return;
        }
        this.axios({
          method: 'get',
          url: '/prod-api/getSpecs',
          params: {productGuid: this.currentProduct.guid, stats: 1}
        }).then((response) => {
          if (response.data.code == 200) {
            this.specifications = response.data.data;
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError("获取规格数据失败");
          }
        })
      },
      getSpecByPro: function() {
        this.axios({
          method: 'get',
          // url: '/produce/Whinapply!getSpeByproduct.action',
          // params: {productid: this.currentProduct, type: this.atype, stats: '1,4'}
          url: '/prod-api/produce/whinapply/getSpeByproduct',
          params: {productid: this.currentProduct, type: this.atype, stats: '1,4'}
        }).then((response) => {
          if (response.data.code == 200) {
            let data = response.data;
            this.specifications = data.data;
          } else {
            this.toastError("获取规格数据失败");
          }

        })
      },
      getSpecByPro2: function() {
        this.axios({
          method: 'get',
          url: '/prod-api/produce/whinapply/getSpeByproduct',
          params: {productid: this.product2, types: '2,3', stats: '1,4'}
          // url: '/produce/Whinapply!getSpeByproduct.action',
          // params: {productid: this.product2, types: '2,3', stats: '1,4'}
        }).then((response) => {
          if (response.data.code == 200) {
            let data = response.data;
            this.specifications2 = data.data;
          } else {
            this.toastError("获取成本控制规格数据失败");
          }

        })
      },
      packPtype: function(dictValue) {
        let res = true;
        if (this.picktype == 1) {
          if (dictValue == 1 || dictValue == 2 || dictValue == 3) {
            res = false
          } else if (dictValue == 4) {
            res = true;
          }
        } else if (this.picktype == 2) {
          if (dictValue == 1 || dictValue == 2 || dictValue == 3) {
            res = true
          } else if (dictValue == 4) {
            res = false;
          }
        }
        return res;
      },
      getPicktypes: async function() {
        let that = this;
        await this.picktype;
        this.axios({
          method: 'get',
          url: '/prod-api/system/dict/data/type/pl_type',
        }).then(response => {
          if (response.data.code == 200) {
            that.picktypes = response.data.data;
            this.atype = this.picktype == 2 ? 4 : 1;
          } else {
            this.toastText('获取领料类型数据失败');
          }
        });
        // await this.picktype;
        // this.axios({
        //   method: 'get',
        //   responseType: 'json',
        //   url: '/sales/Sellform!findDict.action',
        //   params: {type: 26}
        // }).then(response => {
        //   if (response.statusText == "OK") {
        //     this.picktypes = response.data;
        //     this.atype = this.picktype == 2 ? 4 : 1;
        //   } else {
        //     this.toastText('获取领料类型数据失败');
        //   }
        // });
      },
    }
  }
</script>
